<!--采购计划-->
<template>
  <div class="app-container fyxmList">
    <el-form :model="selectForm" ref="selectForm" :inline="true">
      <el-form-item label="费用项目" >
        <el-input v-model="selectForm.cpName" placeholder="请输入项目编号或名称" clearable size="small" @keyup.enter.native="getList"/>
      </el-form-item>
      <el-form-item label="所属战线" size="small">
        <el-select v-model="selectForm.depId" placeholder="请选择">
          <el-option
            v-for="item in zhanxList"
            :key="item.deptId"
            :label="item.deptName"
            :value="item.deptId">
          </el-option>
        </el-select>
        
      </el-form-item>
      <el-form-item>
        <el-button v-hasPermi="['basicData:fyxmList:getList']" type="primary" icon="el-icon-search" size="mini"  @click="getList">搜索</el-button>
        <el-button v-hasPermi="['basicData:fyxmList:add']" type="success" icon="el-icon-plus" size="mini"  @click="add">添加</el-button>
      </el-form-item>

    </el-form>
    <el-table v-loading="loading" :data="list.rows" stripe >
      <el-table-column align="center" type="index" label="序号"  width="55"  />
      <el-table-column align="center" label="项目编号"   property="pno" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="所属战线"   property="deptName" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="项目名称"   property="cpName" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="承包类型"   property="contractingType" :show-overflow-tooltip="true"  >
        <template slot-scope="scope">
          <span v-show="scope.row.contractingType=='1'">区队承包</span>
          <span v-show="scope.row.contractingType=='2'">集中管控</span>
          <span v-show="scope.row.contractingType=='3'">工程承包</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="计划模式"   property="planningModel" :show-overflow-tooltip="true"  >
        <template slot-scope="scope">
          <span v-show="scope.row.planningModel=='1'">需求采购</span>
          <span v-show="scope.row.planningModel=='2'">直接采购</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="科目种类"   property="subJects" :show-overflow-tooltip="true"  >
        <template slot-scope="scope">
          <span v-show="scope.row.subJects=='1'">资金来源</span>
          <span v-show="scope.row.subJects=='2'">扣款项目</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="说明信息"   property="reMark" :show-overflow-tooltip="true"  ></el-table-column>

      <el-table-column label="操作"  align="center" width="200" >
        <template slot-scope="scope">
          <el-button v-hasPermi="['basicData:fyxmList:edit']"  size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)">修改</el-button>
          <el-button v-hasPermi="['basicData:fyxmList:del']" size="mini" type="danger" icon="el-icon-delete"  @click="del(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="selectForm.pageNum"
      :limit.sync="selectForm.pageSize"
      @pagination="getList"
    />
    <el-dialog
      :title="name"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="500px">
      <el-form :model="dialogData" ref="dialogData"  label-width="90px" :rules="rules">
        <el-form-item label="项目编号" prop="pno">
          <el-input class="inputstale" v-model="dialogData.pno" placeholder=""  size="small" />
        </el-form-item>
        <el-form-item label="项目名称" prop="cpName">
          <el-input class="inputstale" v-model="dialogData.cpName" placeholder="请输入项目名称"  size="small" />
        </el-form-item>
        <el-form-item label="所属战线" prop="depId">
          <el-select size="small"  v-model="dialogData.depId" placeholder="请选择">
            <el-option
              v-for="item in zhanxList"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="承包类型" prop="contractingType">
          <el-select size="small"  v-model="dialogData.contractingType" placeholder="请选择">
            <el-option
              v-for="item in cblxList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计划模式" >
          <el-select size="small"  v-model="dialogData.planningModel" placeholder="请选择">
            <el-option
              v-for="item in jhmxList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="科目种类" >
          <el-select size="small"  v-model="dialogData.subJects" placeholder="请选择">
            <el-option
              v-for="item in kmzlList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序编号" >
          <el-input class="inputstale" type="number" v-model="dialogData.sorTing" placeholder="请输入排序编号"  size="small" />
        </el-form-item>
        <el-form-item label="项目说明" >
          <el-input
            type="textarea"
            :rows="2"
            style="width:250px"
            placeholder="请输入项目说明"
            v-model="dialogData.reMark">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small"  @click="dialogVisible = false">取 消</el-button>
        <el-button size="small"  type="primary" @click="tianjiaBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

  import request from '@/utils/request'
  export default {
    name: "Role",
    data() {
      return {
        // 表单校验
        rules: {
          contractingType: [
            {required: true, message: "承包类型不能为空", trigger: "blur"}
          ],
          depId: [
            {required: true, message: "所属战线不能为空", trigger: "blur"}
          ],
          cpName: [
            {required: true, message: "项目名称不能为空", trigger: "blur"}
          ],
          pno: [
            {required: true, message: "项目编号不能为空", trigger: "blur"}
          ],
        },
        total:0,
        name:'新增费用项目',
        dialogVisible:false,
        zxvalue:'',

        //科目种类
        kmzlList:[
          {value:1,label:'资金来源'},
          {value:2,label:'扣款项目'},
        ],
        //责任部门
        zrbmList:[ ],
        //承包类型
        cblxList:[
          {value:1,label:'区队承包'},
          {value:2,label:'集中管控'},
          {value:3,label:'工程承担'},
        ],
        //计划模型
        jhmxList:[
          {value:1,label:'需求采购'},
          {value:2,label:'直接采购'},
        ],
        zhanxList:[],
        loading: false,
        list: [],
        dialogData:{
          pno:'',
          cpName:'',
          depId:'',
          contractingType:'',
          subJects:'',
          planningModel:'',
          sorTing:'',
          reMark:'',

        },
        selectForm: {
          pageNum: 1,
          pageSize: 10,
          cpName:'',
          depId:'',
        },
        date:'',
        rows:false,
        leixing:'post',
      };
    },
    created() {
      this.getZhanxian()
      this.getBumen()
      this.getList();

    },
    methods: {
      //添加确定
      tianjiaBtn:function(){
        this.dialogData.sorTing = this.dialogData.sorTing/1
        if(!this.dialogData.pno){
          this.$message({
            type: 'error',
            message: '项目编号不能为空'
          });
          return
        }
        if(!this.dialogData.cpName){
          this.$message({
            type: 'error',
            message: '项目名称不能为空'
          });
          return
        }
        if(!this.dialogData.depId){
          this.$message({
            type: 'error',
            message: '所属战线不能为空'
          });
          return
        }

        if(!this.dialogData.contractingType){
          this.$message({
            type: 'error',
            message: '承包类型不能为空'
          });
          return
        }
        request({
          url: '/method/costproject',
          method: this.leixing,
          data: this.dialogData
        }).then(response => {
          this.dialogVisible = false
          this.getList();
        });
      },
      //获取部门信息
      getBumen:function(){
        request({
          url: '/system/dept/listFrontAndMine',
          method: 'get',
        }).then(response => {
          console.log('333',response)
          this.zrbmList = response.data

        });
      },
      //获取战线
      getZhanxian:function(){
        request({
          url: '/system/dept/listFrontAndMine',
          method: 'get',
        }).then(response => {
          this.zhanxList = response.data

        });
      },
      /** 查询设备类型表列表 */
      getList() {

        this.loading = true;
        request({
          url: '/method/costproject/list',
          method: 'get',
          params:this.selectForm
        }).then(response => {
          this.loading = false;
          this.list.rows = response.rows
          this.total = response.total
        });
      },
      dateSelect(){
        this.selectForm.applyBeginTime=this.date[0];
        this.selectForm.applyEndTime=this.date[1];
        console.log(this.selectForm);
      },
      /** 删除*/
      del(row) {
        this.$confirm('确定删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          this.shanchu(row.id)
        }).catch(() => {
          this.$message.info('取消删除')
        })
      },
      shanchu:function(id){
        request({
          url: '/method/costproject/' + id,
          method: 'delete'
        }).then(response => {
          if(response.code=='200'){
            this.$message.success('删除成功')
            this.getList()
          }
        });
      },

      //采购计划
      add(){
        this.dialogData={}
        this.leixing = 'post'
        this.name='新增费用项目'
        this.dialogVisible = true
      },
      //修 改
      edit(row){
        this.dialogData=row

        this.leixing = 'put'
        this.name='修改费用项目'
        this.dialogVisible = true
      },

      //表格编辑
      handleEdit:function (index,row) {
        console.log(row)
        var obj={
          name:'采购计划'
        }
        this.$router.push({path:'/purchaseGL/add',query:{data:obj}});
      },
      //删除
      handleDelete:function (index,row) {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },



    }
  };
</script>
<style>
  .fyxmList .inputstale {
    width: 200px;
  }
</style>
